<template>
	<div class="echarts-box">
		<div class="map-container" id="main" @click="showChinaMap" ref="myEchart" style="height:100%;width:100%"></div>
		<div class="right_opetate row-center" id='right_opetate'></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import china from "@/common/utils/china.json";
	import {
		allProvince
	} from "@/common/chinaAndProvince/index";
	echarts.registerMap("china", china);

	export default {
		name: "ChinaMap",
		components: {},
		data() {
			return {
				map: {},
				currProvince:"全国"
			};
		},
		created() {
			this.$nextTick(() => {
				this.initMap();
			});
		},
		methods: {
			randomData() {
				return Math.round(Math.random() * 500);
			},
			//  展示中国地图
			showChinaMap() {
				let name='全国'
				this.currProvince = name;
				let option = this.getMapOpt();
				this.map.setOption(option, true);
				this.$emit('setCurrProvince',name)
			},
			getMapOpt(place) {
				var mydata = [{
						name: "北京",
						value: "100"
					},
					{
						name: "天津",
						value: this.randomData()
					},
					{
						name: "上海",
						value: this.randomData()
					},
					{
						name: "重庆",
						value: this.randomData()
					},
					{
						name: "河北",
						value: this.randomData()
					},
					{
						name: "河南",
						value: this.randomData()
					},
					{
						name: "云南",
						value: this.randomData()
					},
					{
						name: "辽宁",
						value: this.randomData()
					},
					{
						name: "黑龙江",
						value: this.randomData()
					},
					{
						name: "湖南",
						value: this.randomData()
					},
					{
						name: "安徽",
						value: this.randomData()
					},
					{
						name: "山东",
						value: this.randomData()
					},
					{
						name: "新疆",
						value: this.randomData()
					},
					{
						name: "江苏",
						value: this.randomData()
					},
					{
						name: "浙江",
						value: this.randomData()
					},
					{
						name: "江西",
						value: this.randomData()
					},
					{
						name: "湖北",
						value: this.randomData()
					},
					{
						name: "广西",
						value: this.randomData()
					},
					{
						name: "甘肃",
						value: this.randomData()
					},
					{
						name: "山西",
						value: this.randomData()
					},
					{
						name: "内蒙古",
						value: this.randomData()
					},
					{
						name: "陕西",
						value: this.randomData()
					},
					{
						name: "吉林",
						value: this.randomData()
					},
					{
						name: "福建",
						value: this.randomData()
					},
					{
						name: "贵州",
						value: this.randomData()
					},
					{
						name: "广东",
						value: this.randomData()
					},
					{
						name: "青海",
						value: this.randomData()
					},
					{
						name: "西藏",
						value: this.randomData()
					},
					{
						name: "四川",
						value: this.randomData()
					},
					{
						name: "宁夏",
						value: this.randomData()
					},
					{
						name: "海南",
						value: this.randomData()
					},
					{
						name: "台湾",
						value: this.randomData()
					},
					{
						name: "香港",
						value: this.randomData()
					},
					{
						name: "澳门",
						value: this.randomData()
					},
				];
				console.log(mydata);
				var option = {
					backgroundColor: "#404a59",
					title: {
						text: this.currProvince,
						textStyle: {
							fontSize: 18,
							color: "#fff",
						},
						subtext: "",
						// x: "center",
						left: "center",
					},
					// geo: {
					//   map: place ? place : "china",
					//   roam: false,
					//   center:[105,30],
					//   label:{
					//     emphasis:{
					//       show:false
					//     },
					//     normal:{
					//       show:true,
					//       fontSize:12,
					//       color:'#fff'
					//     }
					//   },
					//   itemStyle:{
					//     normal:{
					//       areaColor:'#28a7e9',
					//       borderColor:'#111',
					//     },
					//     emphasis:{
					//       areaColor:'#2a333d',
					//       color:'#fff'
					//     }
					//   }
					// },
					tooltip: {
						trigger: "item",
					},

					//左侧小导航图标
					// visualMap: {
					//   show: true,
					//   x: "left",
					//   y: "center",
					//   splitList: [
					//     { start: 500, end: 600 },
					//     { start: 400, end: 500 },
					//     { start: 300, end: 400 },
					//     { start: 200, end: 300 },
					//     { start: 100, end: 200 },
					//     { start: 0, end: 100 },
					//   ],
					//   color: [
					//     "#5475f5",
					//     "#9feaa5",
					//     "#85daef",
					//     "#74e2ca",
					//     "#e6ac53",
					//     "#9fb5ea",
					//   ],
					// },

					// //配置属性
					series: [{
						name: "数据",
						type: "map",
						zoom: 1.2,
						selectedMode: "single", //选择类型,
						mapType: place ? place : "china",
						roam: true, //鼠标滚轮缩放
						label: {
							normal: {
								show: true, //省份名称
							},
							emphasis: {
								show: false,
							},
						},
						itemStyle: {
							normal: {
								borderWidth: 1,
								borderColor: "#111", //区域边框色
								areaColor: "#1932ab", //区域背景色
								label: {
									show: true,
									textStyle: {
										color: "#ffffff", //文字颜色
										fontSize: 12, //文字大小
									},
								},
							},
							emphasis: {
								// 选中样式
								borderWidth: 1,
								borderColor: "#1932ab",
								color: "#ffffff",
								label: {
									show: true,
									textStyle: {
										color: "#sffffff",
									},
								},
							},
						},
						// data: mydata, //数据
					}, ],
				};
				return option;
			},
			getProvinceMapOpt(provinceAlphabet, info) {
				echarts.registerMap(provinceAlphabet, info);
				let option = this.getMapOpt(provinceAlphabet);
				this.map.setOption(option, true);
			},
			initMap() {
				this.map = echarts.init(document.getElementById("main"));
				let options = this.getMapOpt();
				if (options && typeof options === "object") {
					this.map.setOption(options);
					this.map.on("click", (param) => {
						let name = param.name
						this.currProvince = name;
						this.$emit('setCurrProvince',name)
						console.log(11111111111);
						console.log(name);
						event.stopPropagation();
						console.log(allProvince[name])
						this.getProvinceMapOpt(allProvince[name].label, allProvince[name].info);
					});
				}
			},
		},
	};
</script>
<style lang="less" scoped>
	.echarts-box {
		width: 100%;
		height: 100%;

		.map-container {
			width: 100%;
			height: 100%;
		}
	}
</style>
